<template>
    <div class="person">
        <h2>sum = {{ sum }}</h2>
        <button @click="changeSum">sum++</button>
        <button @click="changeSum2">sum2++</button>
        <h2>需求：当 sum ≥ 10 或 sum2 ≥ 13 时，给服务器发请求</h2>
    </div>
</template>

<script setup lang="ts" name="Persona">
/* 
    watchEffect 是一种全自动的监视方案，比起 watch 的好处是，不需要显式地指出需要监视哪些对象
*/
import { ref, watch, watchEffect } from 'vue'

let sum = ref(6)
let sum2 = ref(0)

function changeSum(){
    sum.value++
}

function changeSum2(){
    sum2.value += 3
}
// watch 实现一项逻辑，监视与这两个属性相关的逻辑，这使得必须去显式地监视所有与逻辑相关的属性
/* watch([sum, sum2], value => {
    console.log(value)
    let [new_sum, new_sum2] = value
    if (new_sum >= 10 || new_sum2 >= 13){
        console.log('向服务器发请求 watch')
    }
}) */

// watchEffect 实现同样的逻辑，不需要显式地监视某些属性
// watchEffect 的函数在页面刷新时就会执行一次
watchEffect(() => {
    console.log('watchEffect before')
    if(sum.value >= 10 || sum2.value >= 13){
        console.log('向服务器发送请求 watchEffect')
    }
})

</script>

<style scoped>
.person {
    background-color: #afcfb7;
    border-radius: 10px;
    box-shadow: 0 0 10px;
    padding: 20px;
    margin: 10px 0;
}
button{
    margin-right: 5px;
}
hr{
    border-width: 3px;
    border-color: black;
    border-style: solid;
}
</style>
